import React from 'react';
import { SecondHeaderC, PrimaryC, ThreeHeaderC } from '../../components';

class SecondHeaderDemo extends React.Component {
  state = {
    showIncome: false, // 当前是否展开
    showIncomeR: false,
  };

  changeStatus = (i) => {
    this.setState({
      showIncome: i,
    });
  };

  changeStatusRight = (i) => {
    this.setState({
      showIncomeR: i,
    });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <SecondHeaderC title='我是二级标题名' Right={<div>xxxx</div>} />
        <SecondHeaderC
          title='二级标题展开收起按钮在左边'
          Left={<div>xxxx</div>}
          Right={<div>xxxx</div>}
          arrowBtn={true}
          onExpendClick={this.changeStatus} // 展开箭头按钮事件
          colorType={'red'}
          bottomHeight={false}
        />
        {this.state.showIncome ? <div style={{ height: '100px' }}></div> : ''}

        <SecondHeaderC
          title='二级标题展开收起按钮在右边'
          Left={<div>xxxx</div>}
          Right={<div style={{ display: 'inline-block' }}>xxxx</div>}
          arrowBtn={true}
          arrowBtnPosition={'right'}
          arrowBtnTxt={'明细'}
          onExpendClick={this.changeStatusRight} // 展开箭头按钮事件
          colorType={'red'}
        />
        <SecondHeaderC
          title='外部改变状态*************超长换行显示*****************************超长换行显示*****************************超长换行显示*****************************************************************'
          Left={<div>xxxx</div>}
          Right={<div style={{ display: 'inline-block' }}>xxxx</div>}
          arrowBtn={true}
          arrowBtnPosition={'right'}
          arrowBtnTxt={'明细'}
          showContent={this.state.showIncomeR}
          onExpendClick={this.changeStatusRight} // 展开箭头按钮事件
          colorType={'red'}
          bottomHeight={false}
        />
        {this.state.showIncomeR ? <div style={{ height: '100px' }}>内容</div> : ''}
        <PrimaryC
          title='变更状态'
          onClick={() => {
            this.setState({ showIncomeR: !this.state.showIncomeR });
          }}
        />

        <div style={{ width: '500px' }}>
          <SecondHeaderC title='我是二级标题名' Left={<div>xxxx</div>} Right={<div>xxxx</div>} topHeight={true} />
        </div>
        <div style={{ height: '100px' }}></div>
        <ThreeHeaderC colorType={'red'} title='我是三级标题名' Right={<div>xxxx</div>} />
        <ThreeHeaderC
          title='三级标题展开收起按钮在左边'
          Left={<div>xxxx</div>}
          Right={<div>xxxx</div>}
          arrowBtn={true}
          onExpendClick={() => {}} // 展开箭头按钮事件
          bottomHeight={false}
        />
        {this.state.showIncome ? <div style={{ height: '100px' }}></div> : ''}

        <ThreeHeaderC
          title='三级标题展开收起按钮在右边'
          Left={<div>xxxx</div>}
          Right={<div style={{ display: 'inline-block' }}>xxxx</div>}
          arrowBtn={true}
          arrowBtnPosition={'right'}
          arrowBtnTxt={'明细'}
          onExpendClick={() => {}} // 展开箭头按钮事件
          colorType={'red'}
        />
      </div>
    );
  }
}

export default SecondHeaderDemo;
